<template>
  <h3>我是app组件</h3>
  姓: <input type="text" v-model="person.firtname">
  <br>
  名: <input type="text" v-model="person.lastname">
  <br>
<span>全名为:{{person.fullName}}</span>
  <br>
  全名: <input type="text" v-model="person.fullName">
</template>

<script>
import {reactive,computed} from "vue";

export default {
  name: 'App',
/* TODO  vue2的实现方法
    computed:{
    fullName(){
      return this.person.firtname+'-'+this.person.lastname
    }
  },*/
  setup() {
    //数据
    let person = reactive({
      firtname: '张',
      lastname: '三',
    })

    //TODO  计算属性(简写)   没有考虑计算属性被修改的情况
   /*TODO person.fullName=computed(()=>{
      return person.firtname+'-'+person.lastname
    })*/

    //TODO 计算属性(考虑读和写)
    person.fullName=computed({
      get(){
        return person.firtname+'-'+person.lastname
      },
      set(value){
        let nameArr = value.split('-')
        person.firtname=nameArr[0]
        person.lastname=nameArr[1]
      }
    })
    return {
      person,
    }
  }
}
</script>

<style>
</style>
